import React, { Component } from 'react';
import './index.less'

class LeftTab extends Component {
  state={
    activeIndex:0
  }
  click = (activeIndex)=>{
    return ()=>{
      this.setState({activeIndex})
    }
  }
  render() {
    const {activeIndex} = this.state
    const { children } = this.props
    return (
      <div className="my-left-nav">
        <ul className="nav-left">
          {children.map((item,index) => {
            return <li onClick={this.click(index)} className={activeIndex === index ? 'active':''} key={item.props.title} >{item.props.title}</li>
          })}
          
        </ul>
        <ol className="nav-right">
        {children.map((item,index) => {
            return <li style={activeIndex === index ? {display:'block'}:{display:'none'}} key={item.props.title}>{item.props.children}</li>
          })}
        </ol>

      </div>
    );
  }
}

export default LeftTab;